<script setup>
import { onMounted, reactive, ref } from 'vue';
import {MailboxState,PicCateAllList,formatTimestamp,XXisShow} from '@/hooks/Picker'
import {getSermailboxData,getSermailboxDel} from '@/api/Sermailbox'
import {ElMessageBox,ElMessage} from "element-plus";
import ServiceMailbox from './ServiceMailbox.vue';
const MailboxstateList=MailboxState()
const  cateList=PicCateAllList()
const Mailbox=ref()
const count=ref()
const list=ref([])
const queryData=reactive({
  current:1,
  pageSize:1,
  title:'',
  community_code:'',
  status:null,
  create_time:''
})
const createtime=ref()
const initData=async()=>{
  let {data}=await getSermailboxData(queryData)
 
  count.value=data.count
  list.value=data.rows
}
onMounted(() => {
  initData()
})
const sizeChange = (val) => {
  queryData.pageSize = val;
  initData();
};
// 页码切换
const currentChange = (val) => {
  queryData.current = val;
  initData();
};
const ResEt=()=>{
  createtime.value=''
    Object.assign(queryData,{
      current:1,
  pageSize:1,
  title:'',
  community_code:'',
  status:null,
  create_time:''
    })
    initData()
}
const onSearCh=()=>{
  queryData.current=1
  queryData.create_time=createtime.value
  if(Array.isArray(queryData.create_time)){
    queryData.create_time=queryData.create_time.join(',')
  }
  initData()
}
// const isShow=ref(false)
const delRow=(id)=>{
  ElMessageBox.confirm(
    '确定删除吗',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功!',
      })
      getSermailboxDel(id)
     setTimeout(()=>{
      if(queryData.current>1&&list.value.length===1)queryData.current--
      initData()
     },1000)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
    
}
const ExaMine=(id)=>{
  Mailbox.value.EchoRepair(id)
  XXisShow.value=true
}
</script>
<template>
  <div class="app-container">
        <p style="font-size: 14px;">
          <b style="font-size: 20px;">信箱管理</b>
            用于管理小区里业主的信箱信息（app端来的数据）</p>   
            <el-card>
              <el-form :model="queryData" :inline="true" class="demo-form-inline" label-position="top">
          <el-col :span="4">
            <el-form-item label="小区名称">
    <el-select  placeholder="请输入" v-model="queryData.community_code" clearable>
      <el-option v-for="item in cateList" :key="item.id" :label="item.name" :value="item.code"></el-option>
    </el-select>
  </el-form-item>
</el-col>
<el-col :span="4">
    <el-form-item label="信件标题">
    <el-input  placeholder="请输入" clearable v-model="queryData.title"></el-input>
  </el-form-item>
</el-col>
<el-col :span="4">
  <el-form-item label="状态">
    <el-select  placeholder="请输入" v-model="queryData.status" clearable>
      <el-option v-for="(item,index) in MailboxstateList" :key="index" :label="item.label" :value="item.value"></el-option>
     
    </el-select>
  </el-form-item >
</el-col>
<el-col :span="4">
  <el-form-item label="创建时间">
    <el-date-picker
      v-model="createtime"
      type="daterange"
      range-separator="至"
      start-placeholder="请选择"
      end-placeholder="请选择" clearable
      value-format="x">
    </el-date-picker>
  </el-form-item>
</el-col>
  <el-col :offset="4" :span="4">
    <el-form-item style="padding-top: 21px;">
        <el-button @click="ResEt">重置</el-button>
        <el-button type="primary" @click="onSearCh">搜索</el-button>
  </el-form-item>
  </el-col>
        </el-form>
        </el-card>
        <br>
        <!-- 表格 -->
        <el-card>
          <el-table :data="list">
            <el-table-column width="60px" prop="id" label="ID">
            </el-table-column>
            <el-table-column prop="community.name" label="小区名称">
            </el-table-column>
            <el-table-column  prop="title" label="信件标题">
            </el-table-column>
           
            <el-table-column   prop="member" label="投诉人">
              <template #default="{row}">
              <span v-if="row.is_anonymity==1">匿名不予显示</span>
              <span v-else>未知</span>
              </template>
            </el-table-column>
            <el-table-column  prop="status" label="状态">
              <template #default="{row}">
               {{row.status==0?'未读':'已读回复'  }}
              </template>
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间">
              <template #default="{row}">
                {{formatTimestamp(row.create_time)}}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="{row}">
                <el-button type="text" @click="ExaMine(row.id)">查看并回复</el-button>
                <el-button type="text" text @click="delRow(row.id)">删除</el-button>
              </template>
            </el-table-column>

          </el-table>
          <!-- 分页区域 -->
          <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        v-model:current-page="queryData.current"
        v-model:page-size="queryData.pageSize"
        layout="total, prev, pager, next"
        :total="count"
        background>
      </el-pagination>
        </el-card>
        <ServiceMailbox ref="Mailbox" @updateList="initData"></ServiceMailbox>
    </div>
    <el-from label-width="80px" style="text-align: center;">
    <div>Ant Design divro黑马前端合肥前端欢迎您</div>
    <div>© 2023 悦兴物业集团</div>
    <br>
  </el-from>
</template>
<style  scoped>

</style>